// PDF生成模板
export const registration = (params) => {
    const { contestName, contestBg, team, members, remark, link } = params;
    const container = document.createElement('div');
    container.className = 'content';
    container.style.height = '297mm';
    container.style.width = '222mm';
    container.style.padding = '40px';
    container.innerHTML = `
    <style scoped>
        body {
            font-family: 'Douyin Sans';
            margin: 0;
        }
        h1 {
            text-align: center;
            font-size: 30px;
            margin-bottom: 15px;
        }
        table {
            width: 100%;
            border-collapse: collapse;
            margin-bottom: 20px;
            table-layout: fixed;
        }
        th, td {
            border: 1px solid #000;
            padding: 8px;
            text-align: center;
            font-size: 20px;
            height: 50px;
        }
        .label-cell {
            width: 20%;
            justify-content: center;
            text-align: center;
            font-weight: bold;
        }
        .value-cell {
            text-align: center;
            justify-content: center;
            width: 30%;
        }
        .large-value-cell {
            height: 500px;
            vertical-align: top;
        }
        .description {
            width: 100%;
            border: 1px solid #000;
            padding: 10px;
        }
        .description-text {
            width: 100%;
            height: 150px;
            border: none;
            resize: none;
            margin-top: 10px;
            font-family: 'Douyin Sans';
            font-size: 14px;
        }
        
    </style>
    <body>
        <img src="${contestBg}" alt="背景图片" style="width:222mm;  object-fit: contain; position: absolute;  left: 0; right: 0; z-index: -1; opacity: 0.3;">
        <h1>${contestName}报名表</h1>
        <table>
            <tr>
                <td class="label-cell">队名</td>
                <td class="value-cell">${team.teamName}</td>
                <td class="label-cell">大赛分组</td>
                <td class="value-cell">${team.model}</td>
            </tr>
            <tr>
                <td class="label-cell">作品方向</td>
                <td class="value-cell">${team.direction}</td>
                <td class="label-cell">作品名称</td>
                <td class="value-cell">${team.opusName}</td>
            </tr>
            <tr>
                <td class="label-cell" colspan="1">作品链接</td>
                <td class="value-cell" colspan="3">${link}</td>
            </tr>
            <tr>
                <td class="label-cell">队长信息</td>
                <td class="value-cell" colspan="3">${members[0].name} ${members[0].studentId} ${members[0].college}</td>
            </tr>
            <tr>
                <td class="label-cell">队长手机号</td>
                <td class="value-cell" colspan="3">${members[0].phone}</td>
            </tr>
            <tr>
                <td class="label-cell">队长邮箱</td>
                <td class="value-cell" colspan="3">${members[0].email}</td>
            </tr>
            <tr>
                <td class="label-cell">成员1信息</td>
                <td class="value-cell" colspan="3">${members[1]?.name || ''} ${members[1]?.studentId || ''} ${members[1]?.college || ''}</td>
            </tr>
            <tr>
                <td class="label-cell">成员2信息</td>
                <td class="value-cell" colspan="3">${members[2]?.name || ''} ${members[2]?.studentId || ''} ${members[2]?.college || ''}</td>
            </tr>
        </table>
        
        <div class="description">
            <p style="font-weight: bold;font-size: 20px; text-align: center;">作品简介 (不超过500字)</p>
            <div class="large-value-cell">${remark}</div>
        </div>
    </body>
  `;
    return container;
};
export default registration;